<template>
  <div class="preview-dialog">
    <el-row>
      <el-col :span="6">
        <div class="queTitle">【题型】：{{ qutionsDetail.questionType | questionType }}</div>
        <div class="queTitle">【学科】：{{ qutionsDetail.subjectName }}</div>
      </el-col>
      <el-col :span="6">
        <div class="queTitle">【编号】：{{ qutionsDetail.id }}</div>
        <div class="queTitle">【目录】：{{ qutionsDetail.directoryName }}</div>
      </el-col>
      <el-col :span="6">
        <div class="queTitle">【难度】：{{ qutionsDetail.difficulty | difficulty }}</div>
        <div class="queTitle">【方向】：{{ qutionsDetail.direction }}</div>
      </el-col>
      <el-col :span="6">
        <div class="queTitle">
          【标签】：{{ qutionsDetail.tags}}
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="queTitle">
      【题干】：
      <pre style="color: blue" v-html="qutionsDetail.question"></pre>
    </div>
    <p v-if="qutionsDetail.questionType !== '3'">{{ qutionsDetail.questionType | questionType }} 选项：（以下选中的选项为正确答案）</p>
    <div
      style="margin: 20px 0"
      v-for="item in qutionsDetail.options"
      :key="item.id"
    >
      <div v-if="qutionsDetail.questionType === '1'">
        <el-radio onclick="return false;" v-model="isRight" :label="item.isRight">{{ item.title }}</el-radio>
      </div>
      <div v-else-if="qutionsDetail.questionType === '2'">
        <el-checkbox onclick="return false;" :checked="item.isRight===1" :label="item.code">{{item.title}}</el-checkbox>
      </div>
    </div>
    <el-divider></el-divider>
    <div>
      【参考答案】：
      <el-button type="danger" size="small" @click="showVideo = true"
        >视频答案预览</el-button
      >
    </div>
    <div class="video" v-if="showVideo">
      <video
        width="400px"
        height="300px"
        :src="qutionsDetail.videoURL"
        autoplay
        controls="controls"
      >
        您的浏览器不支持 video 标签。
      </video>
    </div>
    <el-divider></el-divider>
    <div>【答案解析】：<p style="display:inline-block" v-html="qutionsDetail.answer"></p></div>
    <el-divider></el-divider>
    <div>【方向】：{{ qutionsDetail.remarks }}</div>
    <div slot="footer" class="dialog-footer">
        <el-button class="offPreview" text-align="right" type="primary" @click="$emit('close')">关闭</el-button>
    </div>
  </div>
</template>

<script type="text/javascript">
import { detail } from '@/api/hmmm/questions.js'
// 导入需要枚举的数据
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'PreviewDialog',
  components: {},
  props: {
    // 试题id
    questionRowId: {
      type: [String, Number],
      required: true
    }
  },

  filters: {
    // 试题类型
    questionType (val) {
      if (!val) return
      const obj = questionType.find((obj) => obj.value === Number(val))
      return obj.label
    },
    // 试题难度
    difficulty (val) {
      if (!val) return
      const obj = difficulty.find((obj) => obj.value === Number(val))
      return obj.label
    }
  },

  data () {
    return {
      // 试题详情
      qutionsDetail: {},
      // 显示 隐藏video
      showVideo: false,
      // 正确选项
      isRight: 1
    }
  },

  created () {
    this.getQutionsDetail()
  },

  methods: {
    // 获取试题详情
    async getQutionsDetail () {
      const res = await detail({ id: this.questionRowId })
      this.qutionsDetail = res.data
    }
  }
}
</script>

<style scoped lang="scss" >
.el-divider--horizontal {
  margin: 7px 0;
}
.video {
  width: 400px;
  height: 300px;
}
.queTitle {
  margin-bottom: 20px;
}
::v-deep .el-radio__inner {
  display: block !important;
}
.dialog-footer {
  position: relative;
  height: 70px;
  .offPreview {
      position: absolute;
      bottom: 0;
      right: 0;
  }
}
</style>
